element-ui

What is element-ui?

Element UI is a Vue 2.0-based component library for developers, designers, and product managers. It provides a comprehensive set of UI components to build rich and interactive web applications.

What are element-ui's main functionalities?

Form

Element UI provides a robust form component that includes form items, input fields, and buttons. This example demonstrates a simple login form with username and password fields.

<template>
  <el-form :model="form">
    <el-form-item label="Username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="Password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('Form submitted:', this.form);
    }
  }
};
</script>

Table

The table component in Element UI allows for the display of data in a tabular format. This example shows a table with columns for date, name, and address.

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-04',
        name: 'Jane Doe',
        address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
      }]
    };
  }
};
</script>

Dialog

Element UI's dialog component is used to create modal dialogs. This example demonstrates a simple dialog that can be opened by clicking a button.

<template>
  <el-button type="text" @click="dialogVisible = true">Open Dialog</el-button>
  <el-dialog title="Hello, world" :visible.sync="dialogVisible">
    <p>Try Element</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

Other packages similar to element-ui

vuetify

Vuetify is a Vue UI Library with beautifully handcrafted Material Components. It offers a wide range of components and customization options, making it a strong alternative to Element UI. Vuetify is known for its adherence to the Material Design specification.

ant-design-vue

Ant Design Vue is a Vue implementation of the Ant Design system. It provides a set of high-quality components and demos for building rich, interactive user interfaces. Ant Design Vue is known for its comprehensive documentation and enterprise-level features.

bootstrap-vue

Bootstrap Vue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js. It combines the power of Bootstrap with the flexibility of Vue, making it a good choice for developers familiar with Bootstrap.

README

A Vue.js 2.0 UI Toolkit for Web.

Element will stay with Vue 2.x

For Vue 3.0, we recommend using Element Plus(Element Plus is a community develop project)

For MiniProgram development, we recommend using MorJS

Links

• Homepage and documentation
  • International users
  • Chinese users
  • Spanish users
  • French users
• awesome-element
• FAQ
• Vue.js 3.0 migration
• Customize theme
• Preview and generate theme online
• Element for React
• Element for Angular
• Atom helper
• Visual Studio Code helper
• Starter kit
  • element-starter
  • element-in-laravel-starter
• Design resources
• Gitter
  • International users
  • Chinese users

Install

npm install element-ui -S

Quick Start

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

// or
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

For more information, please refer to Quick Start in our documentation.

Browser Support

Modern browsers and Internet Explorer 10+.

Development

Skip this part if you just want to use Element.

For those who are interested in contributing to Element, please refer to our contributing guide (中文 | English | Español | Français) to see how to run this project.

Changelog

Detailed changes for each release are documented in the release notes.

FAQ

We have collected some frequently asked questions. Before reporting an issue, please search if the FAQ has the answer to your problem.

Contribution

Please make sure to read the contributing guide (中文 | English | Español | Français) before making a pull request.

Special Thanks

English documentation is brought to you by SwiftGG Translation Team:

• raychenfj
• kevin
• 曾小涛
• 湾仔王二
• BlooDLine
• 陈铭嘉
• 千叶知风
• 梁杰
• Changing
• mmoaay

Spanish documentation is made possible by these community developers:

• adavie1
• carmencitaqiu
• coderdiaz
• fedegar33
• Gonzalo2310
• lesterbx
• ProgramerGuy
• SantiagoGdaR
• sigfriedCub1990
• thechosenjuan

French documentation is made possible by these community developers:

• smalesys
• blombard

Join Discussion Group

Scan the QR code using Dingtalk App to join in discussion group :

LICENSE

MIT